<template>
	<div 
		class="glass-button glass"
		:class="['text-'+color]"
		hover-class="glass-button-hover"
		:hover-stay-time="100"
		@click="$emit('click')">
		<slot></slot>
	</div>
</template>

<script>
    export default {
		props: {
			color: {
				type: String,
				default: () => ''
			}
		},
        data() {
            return {

            }
        }
    }
</script>

<style lang="scss" scoped>
	.glass-button {
		padding: 15px;
		display: inline-flex;
		border-radius: 14px;
		
		min-width: 40px;
		min-height: 20px;
		font-size: 1rem;
		justify-content: center;
		align-items: center;
		transition: transform .1s;
		
		&:active,
		&-hover {
			transform: scale(.95);
		}
	}
</style>


